<template>

  <div class="transactions">
    <div class="header-mine-search">
      <div class="header-mine-search__line">
        <div class="header-mine-search__list">
          <div class="search__list-label">{{t('Transaction.Time')}}：</div>
          <div class="search__list-wrapper">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              unlink-panels
              range-separator="-"
              :start-placeholder="t('lang.el.datepicker.startDate')"
              :end-placeholder="t('lang.el.datepicker.endDate')"
              :shortcuts="shortcuts"
              value-format="YYYY-MM-DD"
              size="large"
            />
          </div>
        </div>
        <div class="header-mine-search__list">
          <el-input v-model="form.orderId" size="small">
            <template #prefix>
              <i-uil-search />
            </template>
          </el-input>
        </div>
      </div>
      <div class="header-mine-search__line">
        <div class="header-mine-search__list">
          <div class="search__list-label">{{t('Transaction.type')}}：</div>
          <div class="search__list-wrapper small-wrapper">
            <el-select v-model="form.type" clearable size="small">
              <el-option
                v-for="item in getEnumOptions('accessRecordType')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="search__list-label">{{t('Transaction.status')}}：</div>
          <div class="search__list-wrapper small-wrapper">
            <el-select v-model="form.status" clearable size="small">
              <el-option
                v-for="item in getEnumOptions('accessRecordStatus')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="search__list-label">{{t('UserInfo.Currency')}}：</div>
          <div class="search__list-wrapper small-wrapper">
            <el-select v-model="form.currencyId" clearable size="small">
              <el-option
                v-for="item in piniaUserinfo.getWallet"
                :key="item.currencyId"
                :label="item.currencyName"
                :value="item.currencyId"
              />
            </el-select>
          </div>
        </div>
        <div class="header-mine-search__list">
          <el-button type="primary" class="header-mine-search__btns" @click="getUserDrawList" :loading="btnLoading">{{t('BetRecord.Search')}}</el-button>
        </div>
      </div>
    </div>
    <div class="dialog-content">
      <div class="dialog-content-box">
        <div class="dialog-content-wrapper">
          <el-table :data="accessRecord" height="100%" class="record-table" :empty-text="t('BetRecord.Nocontent')">
            <el-table-column align="center" prop="orderId" :label="t('Transaction.OrderId')" width="180"/>
            <el-table-column align="center" :label="form.type === '2' ? t('Transaction.endTime') : t('Transaction.startTime')" width="180">
              <template #default="{row}">
                {{ parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="type" :label="t('Transaction.type')">
              <template #default="{row}">
                {{ t(getEnumValue('accessRecordType', row.type)) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="money" :label="t('Transaction.Amount')" />
            <el-table-column align="center" prop="status" :label="t('Transaction.status')">
              <template #default="{row}">
                {{ t(getEnumValue('accessRecordStatus', row.status)) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="error" :label="t('Transaction.text34')" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="record-pagination">
      <ZPagination
        v-model:pagination="pagination"
        :query="getUserDrawList"
      />
    </div>
  </div>
</template>

<script setup lang="ts" name="AccessRecord">
import recordApi from '@/api/modules/record';
import userinfo from '@/store/userinfo';
import { parseTime } from '@/utils/format';
import { getEnumValue, getEnumOptions } from '@/utils/enums';

const piniaUserinfo:any = userinfo();

const { t } = useI18n();
const data:any = reactive({
  form: {
    type: "1",
    date: [
      parseTime(new Date().getTime() - 3600 * 1000 * 24 * 7),
      parseTime(new Date())
    ],
    status: '',
    currencyId: piniaUserinfo.getCurrentWallet.currencyId
  },
  options: [],
  accessRecord: [], // 资金记录
  pagination: {
    total: 0,
    pageSize: 10,
    pageNum: 1
  },
  btnLoading: false,
});

const {
  form,
  options,
  accessRecord,
  pagination,
  btnLoading,
} = toRefs(data);

const shortcuts = [
  {
    text: t('lang.el.datepicker.lastweek'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: t('lang.el.datepicker.prevMonth'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: t('lang.el.datepicker.prevMonth3'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

const getUserDrawList = () => {
  btnLoading.value = true;
  recordApi.getUserDrawList({
    currencyId: form.value.currencyId,
    orderId: form.value.orderId,
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
    startTime: form.value.date[0] + ' 00:00:00',
    endTime: form.value.date[1] + ' 23:59:59',
    status: form.value.status,
    type: form.value.type
  }).then((response:any)=>{
    console.log("存取记录", response)
    if(response.code === 200){
      accessRecord.value = response.rows;
      pagination.value.total = response.total;
    }
  }).finally(()=>{
    btnLoading.value = false;
  });
}
getUserDrawList();
</script>

<style lang="scss" scoped>
@import url('./index.scss');
</style>
